<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body><script src="../js/vue.min.js"></script>
<script src="../js/vue-router.js"></script>
<div id="app">
    <h1>Hello App!</h1>
    <p>

        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>

    <router-view></router-view>
</div>
</body>
</html>

<script>var Foo = { template: '<div>foo</div>' }
    var Bar = { template: '<div>bar</div>' }

    var routes = [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
    ]

    var router = new VueRouter({
        routes:routes
    })


    var app = new Vue({
        router:router
    }).$mount('#app')
</script>